<template>
  <view class="wrap">
    <view class="title">
      <view class="line"></view>
      <text>已授权用户</text>
    </view>
    <view class="patient-list">
      <view v-for="(item, index) of patientList" :key="index">
        <view v-if="item.token" class="patient-items">
          <view class="flex-left">
            <text class="name">{{ item.name }}</text>
            <text class="sex">{{ item.gender }}</text>
            <text class="age">{{ item.age }}</text>
          </view>
          <view class="flex-right">
            <view class="right-btn" @tap="cancel(item)">取消授权</view>
            <view class="right-btn" @tap="manual(item)">{{
              item.loading ? '同步中...' : '手动同步'
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <up-modal
      :show="show"
      :title="'提示'"
      :closeOnClickOverlay="true"
      :showCancelButton="true"
      :confirmColor="'#FF503D'"
      @confirm="cancelAuth"
      @close="show = false"
      @cancel="show = false"
    >
      <view
        style="width: 100%; text-align: center; color: #4e5969; font-size: 30rpx; font-weight: 400"
        >您确定要取消授权吗?取消后将不再继续同步相关数据。</view
      >
    </up-modal>
    <view class="fixed">
      <button class="confirm_btn" @tap="toAuthorize">新建授权</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { auth_patient, sync_manual, deleteToken } from '@/module/api/HUAWEI'
import { throttle } from '@/utils/tools'

const patientList = ref([])
const userInfo = ref({})
const show = ref(false)
const cancelInfo = ref({})

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  init()
})

const init = () => {
  auth_patient(userInfo.value.userId).then((res) => {
    patientList.value = res.data
    patientList.value.forEach((val: any) => {
      val.loading = false
    })
  })
}
const cancel = (item: any) => {
  show.value = true
  cancelInfo.value = item
}
const cancelAuth = throttle(() => {
  // 取消授权
  let params = {
    appId: cancelInfo.value.appId,
    empi: cancelInfo.value.empi,
    token: cancelInfo.value.token
  }
  deleteToken(params).then((res) => {
    init()
    show.value = false
  })
}, 300)
const manual = (item: any) => {
  // 手动同步
  item.loading = true
  if (item.loading) {
    let params = {
      empi: item.empi,
      token: item.token
    }
    sync_manual(params).then((res) => {
      item.loading = false
      uni.showToast({
        title: '数据同步完成!',
        icon: 'none'
      })
    })
  }
}
const toAuthorize = () => {
  uni.redirectTo({
    url: '/module/src/pages/myEquipment/authorize'
  })
}
</script>
<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  padding: 26rpx 32rpx;
}
.title {
  margin-bottom: 24rpx;
  font-weight: 700;
  font-size: 32rpx;
  color: #222222;
  display: flex;
  .line {
    width: 8rpx;
    height: 32rpx;
    border-radius: 0 4rpx 4rpx 0;
    background: #00d1b6;
    margin-right: 16rpx;
    transform: translateY(8rpx);
  }
}
.patient-list {
  max-height: 504rpx;
  overflow: auto;
  .patient-items {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 40rpx 32rpx;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .flex-left {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      .name {
        font-weight: 700;
        font-size: 32rpx;
        color: #222222;
      }
    }
    .flex-right {
      display: flex;
      gap: 16rpx;
      .right-btn {
        border-radius: 28rpx;
        border: 1rpx solid #00d1b6;
        font-weight: 400;
        font-size: 28rpx;
        color: #00d1b6;
        padding: 0 24rpx;
        height: 56rpx;
        line-height: 56rpx;
      }
    }
  }
}
.fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  .confirm_btn {
    width: 100%;
    background: #00d1b6;
    border-radius: 44rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
  }
}
</style>
